'use strict'
import React, { createClass, PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link, withRouter } from 'react-router'
import $ from 'jquery'

import MainContainer from '../components/index/MainContainer'
import TopHeader from '../components/common/TopHeader'
import Footer from '../components/common/Footer'


import { setExchangeModalData, setGlobalData } from '../actions'


const Index = withRouter(createClass({
    getInitialState() {
        return {
            loading: true,
            error: null,
            data: null,
            bodyBgClr: '#e6e6e6',


            imageData : [
                {
                    src: require('../../image/demo1.jpg'),
                    alt: 'images-1',
                },
                {
                    src: require('../../image/demo2.jpg'),
                    alt: 'images-2',
                },
                {
                    src: require('../../image/demo3.jpg'),
                    alt: 'images-3',
                },
            ]


        }
    },

    componentDidMount() {
        //$('body').css('backgroundColor', this.state.bodyBgClr);
        var me = this;
        $.ajax({
            url: '../webapp/data/goodBoard.json',
            type: 'GET',
            dataType: 'JSON',
            success: function (resp) {
                me.setState({loading: false, data: resp});
            }
        });
        this.props.router.setRouteLeaveHook(this.props.route, () => {
            $('#exchangeModal').modal('hide');
        });
    },

    render() {
        if (this.state.loading) {
            return <div className="loading">努力加载中...</div>
        }
        else if (this.state.data) {

            return (

                <div className="page-index" id="home" data-log="首页">
                    <TopHeader/>
                    <MainContainer/>
                    <Footer/>

                </div>
            )
        }
        else {
            return <div>服务器响应错误</div>
        }
    }
}));

const mapStateToProps = (state) => {
    return {
        goodData: state.goodList,
        globalData: state.globalData
    }
};

export default connect(mapStateToProps, {setExchangeModalData, setGlobalData})(Index);